import React ,{ useEffect, useState  } from 'react'

import { Input ,Button , Card , Pagination ,Avatar} from 'antd'
import type { PaginationProps } from 'antd';
import { useHistory } from 'umi';
import { getOperatingGuideList } from '@/service/personal/operatingGuide';
import CardTable from './component/CardTable';

const { Meta } = Card;

export default function OperatingGuide () {

  const [searchData,setSearchData] = useState('');
  const [dataSource,setDataSource] = useState([])
  const [current, setCurrent] = useState(1);
  const [total, setTotal] = useState(0)
  // const ref = useRef({})
  const history = useHistory()


  const getTabelValue = async(params:any) => {
    const res = await getOperatingGuideList(params)
    if(res?.data){
      setTotal(res.data?.total || 0)
      if(res.data?.records){
        setDataSource(res.data.records || [])
      }
    }
  }

  const onFinish = () => {
    const params:any = {
      current : 1,
      size: 8
    }
    if(searchData){
      params.title = searchData
    }
    setCurrent(1)
    getTabelValue(params)
    // eslint-disable-next-line no-param-reassign
  };

  // 搜索重置
  const onReset = () => {
    const params:any = {
      current : 1,
      size: 8
    }
    setCurrent(1)
    setSearchData(()=>{
      getTabelValue(params)
      return ''
    });
    
  };

  useEffect(()=>{
    const params:any = {
      current : 1,
      size: 8
    }
    getTabelValue(params)
  },[])

  const isJSON = (str:any) => {
    try{
      const ite = JSON.parse(str)
      return ite.map((i:any)=><div>{i.children[0]?.text}</div>)
    }catch{
      return str
    }
  }
  


  const renderItem = (item:any) => <>
    <Card
      hoverable
      onClick={()=>{history.push({pathname: '/systemSetup/documentLists/details', search: `id=${item?.id}`})}}
      style={{ width: '356px' ,height: '376px'}}
      cover={<img style={{ width: '356px' ,height: '220px'}}  alt="example" src="https://ts1.cn.mm.bing.net/th/id/R-C.993123060bbf9b12e6d744e723e70fed?rik=wetmSF32cvaeZA&riu=http%3a%2f%2fimg.pconline.com.cn%2fimages%2fupload%2fupc%2ftx%2fwallpaper%2f1210%2f22%2fc0%2f14558824_1350879506499.jpg&ehk=rA%2b%2b1wiwYNbQzdhwi7cXNhLghQTUbDFF%2fXA8Edq6M6s%3d&risl=&pid=ImgRaw&r=0" />}
    >
      <Meta title={
        <div style={{width:'350px'}}>
          <h4 style={{overflow:'hidden',textOverflow:'ellipsis'}}>{item?.title}</h4>
          <div style={{overflow:'auto',}}>
            <h6 style={{height:'50px', width:'330px', whiteSpace:'pre-wrap',color:'#666666'}}>{
            isJSON(item?.content)
            }</h6>
          </div>
        </div>
      } description={
        <div>
          <Meta 
            style={{height:'45px',paddingTop:'7px',borderTop:'#a99f9fb8 1px solid'}}          
            avatar={<Avatar style={{height:'24px',width:'24px'}} src="https://joeschmoe.io/api/v1/random" />}
            title={<div style={{width:'260px',display:'flex',justifyContent:'space-between',fontSize:'14px'}}><div>{item?.username || '张三'}</div><div>{item?.createTime}</div></div>}           
          />
        </div>
      } />
    </Card>
    </>

  const pginatiChange : PaginationProps['onChange'] = (page) => {
    setCurrent(page)
    const params:any = {
      current : page,
      size: 8
    }
    if(searchData){
      params.title = searchData
    }
    getTabelValue(params)
  };

  return (
      <div>
        <Card style={{width:'100%'}}
         title={<div>
          <div style={{width: '500px', height:'32px',lineHeight:'32px',display:'flex', marginLeft:'24px'}}>
            <span style={{width: '100px'}}>标题搜索：</span>
            <Input value={searchData} style={{width: '300px'}} placeholder="请输入" onChange={(e)=>setSearchData(e.target.value)}/>
            <Button style={{marginLeft:'40px'}} type="primary" size='small' onClick={onFinish}>搜索</Button>
            <Button style={{marginLeft:'10px'}} size='small' onClick={onReset}>重置</Button>
         </div>
        </div>} bordered={false}>
          <div style={{padding:'24px'}}>
            <CardTable dataSource={dataSource} renderItem={renderItem}/>
          </div>
          <div style={{textAlign:'right'}}>
            <Pagination onChange={pginatiChange} pageSize={8} current={current} total={total} showTotal={(totals:number|string) => `总数：${totals}条`}/>
          </div>
        </Card>
         
        
      </div>
  )
}
